import React from "react";
import PropTypes from 'prop-types';
class UserInfo extends React.Component {

    static propTypes = {
        
        id:PropTypes.number
       
    }
    static defaultProps = {
        address:'中国'
    }
    constructor(props) {
        super(props);
        //定义state
        this.state = {
            title:"用户信息",
            user:{
                name:"张三",
                age:18,
                sex:"男"

            }
        }

        console.log("接收到的数据",this.props);

 
    }
    submit(){
        
        // console.log(this.username.value);
        console.log(this.box.innerHTML);
        this.box.style.color="red";
    }
    update(){
       
         //修改state
         //修改state 方法1
        //  this.setState({title:"修改用户信息"},()=>{ 

        //     console.log("修改后的值2222",this.state.title);

        // });

        //修改state 方法2

        // this.setState((preState)=>{

        //     console.log("修改前的值",preState.title);

        //     return {title:"修改用户信息"}

        // })

         //console.log("修改后的值",this.state.title);
         //console.log(111);


         this.setState({title:"修改用户信息"})
         this.setState({user:{...this.state.user,name:"李四"}})

         
    }

    // 生命周期 函数 dom 渲染完成
    componentDidMount(){

        console.log("组件挂载完成");
        console.log("获取div内容",this.box.innerHTML);

    }
    //销毁勾子函数
    componentWillUnmount(){

        console.log("组件销毁");

    }
    render() {

        console.log("render勾子函数");

        return (
            <div className="user-info">

                <div>
                    {this.props.id}
                </div>
                {this.state.title}

                {this.props.address}

                <div ref={c=>this.box=c}>
                    {this.state.user.name }
                </div>
                <div>{this.state.user.age }</div>
                <div>{this.state.user.sex }</div>

               <div>用户名：   <input ref={c=>this.username=c}  type="text" /></div>

                <button onClick={()=>this.update()}>修改</button>

                <button onClick={()=>this.submit()}>提交</button>
               
            </div>
        )
    }


}
export default UserInfo;